<template>
	<div class=" anthology" >
		<!--<ActorDetail/>-->
	    <div class="anthologyList" v-for="(item,index) in actorInfo" :key='index' >
	    	<router-link :to='{name:"actorDetail",query:{id:index}}' class="title"><em>{{item.name}}</em>_资料百科</router-link>
	    	<div class="imgBox">
	    		<img :src="item.imgUrl" alt="" />
	    	</div>
	    	<div class="contentBox">
	    		<p>职业：{{item.work}}</p>
	    		<p>生日：{{item.birthday}}</p>
	    		<p>个人信息：{{item.personalInfo}}</p>
	    		<p>代表作品：{{item.representativeWorks}}</p>
	    	</div>
	    </div>
	    <div class="goTop" @click="goTop" >
	    	回到顶部
	    </div>
	</div>
</template>

<script>
//import ActorDetail from './details/actorDetail';
export default{
	name:'searchActor',
	data(){
		return{
			actorInfo:[]
		}
	},
	components:{
//		ActorDetail
	},
	methods:{
		goTop(event){
			var time;
			time=setInterval(function(){
	            var top = document.body.scrollTop||document.documentElement.scrollTop;
	            top=top*0.9;
	            document.body.scrollTop=top;
	            document.documentElement.scrollTop=top;
	            if(top==0){
	                clearInterval(time);
	            }
            },100);
		}
	},
	created(){
		this.$axios.get('http://localhost:3000/peopleInfo')
		.then(res=>{
//			console.log(res.data.peopleInfo)
			var newData=res.data.peopleInfo;
			this.actorInfo=newData;
		})
		.catch(error=>{
			console.log(error)
		})
	}
}
</script>

<style scoped lang="less">
@current:100rem;
.anthology{
	margin-top: 60/@current;
	.anthologyList{
		border-bottom: 1px solid #D7D2E0;
		overflow: hidden;
		padding: 10/@current 20/@current;
		.title{
			margin-bottom: 10/@current;
			font-size: 26/@current;
		    text-decoration: underline;
		    display: block;
		    color: -webkit-link;
		    em{
		    	color: #c00;
		    }
		}
		.imgBox{
			float:left;
			width: 121/@current;
			height: 121/@current;
			img{
				width: 121/@current;
				height: 121/@current;
			}
		}
		.contentBox{
			width: 465/@current;
			float:left;
			margin-left: 12/@current;
			p{
				font-size: 20/@current;
			}
		}
	}
	.goTop{
		border-radius: 15/@current;
		padding: 0 20/@current;
		height: 100/@current;
		line-height: 100/@current;
		font-size: 24/@current;
		color: #b676eb;
		position: fixed;
		right: 20/@current;
		bottom: 20/@current;
		background-color: #b676eb;
		color: white;
		opacity: .5;
	}
}
</style>